@import "common";
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
input {
    border: 0;
}
input:focus {
    outline: none;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    min-width: 320px;
    width: (750rem / @basefont);
    background-color: rgb(247, 247, 247);
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    height: 4000px;
}
.header {
    display: flex;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: (750rem / @basefont);
    height: (88rem / @basefont);
    background-color: rgb(255, 219, 71);
    .fenlei {
        width: (36rem / @basefont);
        height: (60rem / @basefont);
        background: url(../img/157199320847433454.png) no-repeat;
        background-size: (36rem / @basefont) (60rem / @basefont);
        margin: (14rem / @basefont) (45rem / @basefont) (14rem / @basefont) (34rem / @basefont);
    }
    .search {
        flex: 1;
        .search_box {
            overflow: hidden;
            border-radius: (60rem / @basefont);
            width: (522rem / @basefont);
            height: (64rem / @basefont);
            background-color: rgb(255, 255, 255);
            margin: (12rem / @basefont) 0;
            .soushuo {
                float: left;
                width: (36rem / @basefont);
                height: (36rem / @basefont);
                background: url(../img/soushuo.png) no-repeat;
                background-size: (36rem / @basefont) (36rem / @basefont);
                margin: (15rem / @basefont) (10rem / @basefont) (14rem / @basefont) (22rem / @basefont);
            }
            input {
                float: left;
                width: (400rem / @basefont);
                height: (64rem / @basefont);
                line-height: (64rem / @basefont);
                font-size: (24rem / @basefont);
            }
        }
    }
    .login {
        width: (36rem / @basefont);
        height: (60rem / @basefont);
        background: url(../img/157199322108277118.png);
        background-size: (36rem / @basefont) (60rem / @basefont);
        margin: (14rem / @basefont) (34rem / @basefont)(14rem / @basefont) (45rem / @basefont) ;
    }
}
    // banner的制作
    .banner {
        display: block;
        width: (750rem / @basefont);
        height: (368rem / @basefont);
        img {
            width: 100%;
        }
    }
    //广告栏的制作
    .ad {
        // width: (750rem / @basefont);
        width: 100%;
        height: (200rem / @basefont);
        img {
            width: 100%;
        }
    }
    //nav导航栏的制作
    .nav {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: (308rem / @basefont);
        a {
            position: relative;
            width: (150rem / @basefont);
            height: (142rem / @basefont);
            img {
                position: absolute;
                top: (20rem / @basefont);
                left: (30rem / @basefont);
                width: (84rem / @basefont);
                height: (84rem / @basefont);
            }
            span {
                position: absolute;
                top: (105rem / @basefont);
                left: (29rem / @basefont);
                font-size: (22rem / @basefont);
                color: #666666;

            }
        }
    }
    .ad2 {
        display: flex;
        width: 100%;
        height: (234rem / @basefont);
        margin-top: (24rem / @basefont);
        .box1 {
            flex: 2;
            img {
                width: 100%;
                height: (234rem / @basefont);
            }
        }
        .box2 {
            flex: 1;
            padding-right: (2rem / @basefont);
            img {
                width: 100%;
                height: (234rem / @basefont);
            }
        }
        .box3 {
            flex: 1;
            img {
                width: 100%;
                height: (234rem / @basefont);
            }
        }
    }
    // floor的制作
    .floor {
        margin-top: (24rem / @basefont);
        .floor1 {
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            border-top-left-radius: (15rem / @basefont);
            border-top-right-radius: (15rem / @basefont);
            width: (702rem / @basefont);
            height: (258rem / @basefont);
            margin: 0 (24rem / @basefont);
            .fengge {
                width: (0rem / @basefont);
                height: (258rem / @basefont);
                border: (.5rem / @basefont) solid rgb(242, 242, 242);
            }
            .boxl {
                width: (350rem / @basefont);
                height: (258rem / @basefont);
                background-color: rgb(255, 255, 255);
                .title {
                    overflow: hidden;
                    width: 100%;
                    height: (58rem / @basefont);
                    p {
                        width: 100%;
                        font-size: (28rem / @basefont);
                        font-weight: 700;
                        color: #333333;
                        margin: (18rem / @basefont) (8rem / @basefont) 0 (24rem / @basefont);
                    }
                }
                .renqi {
                    width: (300rem / @basefont);
                    height: (30rem / @basefont);
                    padding: (4rem / @basefont) 0 0 (24rem / @basefont);
                    font-size: (24rem / @basefont);
                    color: #999999;
                }
                .shangping {
                    display: flex;

                    width: 100%;
                    height: (149rem / @basefont);
                    .boxl,.boxr {
                       text-align: center;
                       width: (175rem / @basefont);
                       height: (149rem / @basefont);
                       img {
                           width: (120rem / @basefont);
                           height: (120rem / @basefont);
                           vertical-align: top;
                       }
                       .price {
                           display:block;
                           width: (120rem / @basefont);
                           height: (28rem / @basefont);
                           line-height: (28rem / @basefont);
                           font-size: (22rem / @basefont);
                           text-align: center;
                           margin: 0 auto;
                           color: rgb(255, 85, 0);
                       }
                    }
                }
            }
            .boxr {
                width: (350rem / @basefont);
                height: (258rem / @basefont);
                background-color: rgb(255, 255, 255);
                .title {
                    overflow: hidden;
                    width: 100%;
                    height: (58rem / @basefont);
                    p {
                        width: 100%;
                        font-size: (28rem / @basefont);
                        font-weight: 700;
                        color: #333333;
                        margin: (18rem / @basefont) (8rem / @basefont) 0 (24rem / @basefont);
                    }
                }
                .renqi {
                    width: (300rem / @basefont);
                    height: (30rem / @basefont);
                    padding: (4rem / @basefont) 0 0 (24rem / @basefont);
                    font-size: (24rem / @basefont);
                    color: #999999;
                }
                .shangping {
                    display: flex;

                    width: 100%;
                    height: (149rem / @basefont);
                    .boxl,.boxr {
                       text-align: center;
                       width: (175rem / @basefont);
                       height: (149rem / @basefont);
                       img {
                           width: (120rem / @basefont);
                           height: (120rem / @basefont);
                           vertical-align: top;
                       }
                       .price {
                           display:block;
                           width: (120rem / @basefont);
                           height: (28rem / @basefont);
                           line-height: (28rem / @basefont);
                           font-size: (22rem / @basefont);
                           text-align: center;
                           margin: 0 auto;
                           color: rgb(255, 85, 0);
                       }
                    }
                }
            }
        }
        .floor2 {
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            border-bottom-left-radius: (15rem / @basefont);
            border-bottom-right-radius: (15rem / @basefont);
            width: (702rem / @basefont);
            height: (258rem / @basefont);
            margin: 0 (24rem / @basefont);
            .fengge {
                width: (0rem / @basefont);
                height: (258rem / @basefont);
                border: (.5rem / @basefont) solid rgb(242, 242, 242);
            }
            .boxl {
                width: (350rem / @basefont);
                height: (258rem / @basefont);
                background-color: rgb(255, 255, 255);
                .title {
                    overflow: hidden;
                    width: 100%;
                    height: (58rem / @basefont);
                    p {
                        width: 100%;
                        font-size: (28rem / @basefont);
                        font-weight: 700;
                        color: #333333;
                        margin: (18rem / @basefont) (8rem / @basefont) 0 (24rem / @basefont);
                    }
                }
                .renqi {
                    width: (300rem / @basefont);
                    height: (30rem / @basefont);
                    padding: (4rem / @basefont) 0 0 (24rem / @basefont);
                    font-size: (24rem / @basefont);
                    color: #999999;
                }
                .shangping {
                    display: flex;

                    width: 100%;
                    height: (149rem / @basefont);
                    .boxl,.boxr {
                       text-align: center;
                       width: (175rem / @basefont);
                       height: (149rem / @basefont);
                       img {
                           width: (120rem / @basefont);
                           height: (120rem / @basefont);
                           vertical-align: top;
                       }
                       .price {
                           display:block;
                           width: (120rem / @basefont);
                           height: (28rem / @basefont);
                           line-height: (28rem / @basefont);
                           font-size: (22rem / @basefont);
                           text-align: center;
                           margin: 0 auto;
                           color: rgb(255, 85, 0);
                       }
                    }
                }
            }
            .boxr {
                width: (350rem / @basefont);
                height: (258rem / @basefont);
                background-color: rgb(255, 255, 255);
                .title {
                    overflow: hidden;
                    width: 100%;
                    height: (58rem / @basefont);
                    p {
                        width: 100%;
                        font-size: (28rem / @basefont);
                        font-weight: 700;
                        color: #333333;
                        margin: (18rem / @basefont) (8rem / @basefont) 0 (24rem / @basefont);
                    }
                }
                .renqi {
                    width: (300rem / @basefont);
                    height: (30rem / @basefont);
                    padding: (4rem / @basefont) 0 0 (24rem / @basefont);
                    font-size: (24rem / @basefont);
                    color: #999999;
                }
                .shangping {
                    display: flex;

                    width: 100%;
                    height: (149rem / @basefont);
                    .boxl,.boxr {
                       text-align: center;
                       width: (175rem / @basefont);
                       height: (149rem / @basefont);
                       img {
                           width: (120rem / @basefont);
                           height: (120rem / @basefont);
                           vertical-align: top;
                       }
                       .price {
                           display:block;
                           width: (120rem / @basefont);
                           height: (28rem / @basefont);
                           line-height: (28rem / @basefont);
                           font-size: (22rem / @basefont);
                           text-align: center;
                           margin: 0 auto;
                           color: rgb(255, 85, 0);
                       }
                    }
                }
            }
        }
        .space_px {
            width: (702rem / @basefont);
            height: (1rem / @basefont);
            border: (.5rem / @basefont) solid #f2f2f2;
            margin: 0 auto;
        }
        .floor3 {
            display: flex;
            width: (702rem / @basefont);
            height: (172rem / @basefont);
            margin: 0 (24rem / @basefont);
            background-color: #ffffff;
            .left_title {
                width: (173rem / @basefont);
                height: 100%;
                padding: (47rem / @basefont) (18rem / @basefont) 0 (18rem / @basefont);
                .row1 {
                    font-size: (32rem / @basefont);
                    color: #444444;
                    font-weight: 700;
                }
                .row2 {
                    font-size: (24rem / @basefont);
                    color: #999999;
                }
            }
            .fourspace {
                display: flex;
                justify-content: space-between;
                width: (508rem / @basefont);
                height: 100%;
                a {
                    display: block;
                    position: relative;
                    width: (120rem / @basefont);
                    height: (172rem / @basefont);
                    padding: (15rem / @basefont) (10rem / @basefont) 0 (10rem / @basefont);
                    img {
                        width: (100rem / @basefont);
                        vertical-align: middle;
                    }
                    span {
                        position: absolute;
                        top: (130rem / @basefont);
                        left: (18rem / @basefont);
                        font-size: (22rem / @basefont);
                        color: #333333;
                    }
                }
            }
        }
       .bangdan {
           display: block;
        //    width: (750rem / @basefont);
           width: 100%;
           height: (60rem / @basefont);
           img {
               width: 100%;
               height: (60rem / @basefont);
           }
       }
       .bangdanbox {
           display: flex;
           justify-content: space-between;
           width: (702rem / @basefont);
           height: (266rem / @basefont);
           margin: 0 (24rem / @basefont);
           a {
               display: block;
               width: (226rem / @basefont);
               height: (266rem / @basefont);
               background-color: rgb(255, 255, 255);
               overflow: hidden;
               border-radius: 15px;
               img {
                   width: (150rem / @basefont);
                   height: (150rem / @basefont);
                   margin: (15rem / @basefont) (38rem / @basefont) 0 (38rem / @basefont);

               }
               .bottom {
                   overflow: hidden;
                   height: (93rem / @basefont);
                   width: 100%;
                   background-color: rgb(225, 166, 112);
                   .title1 {
                       font-size: (26rem / @basefont);
                       text-align: center;
                       color: rgb(255, 255, 255);
                       margin-top: (25rem / @basefont);
                   }
                   .title2 {
                       font-size: (22rem / @basefont);
                       text-align: center;
                       color: rgb(250, 239, 230);
                   }
                }
           }
       }
       .cainixihuan {
           width: 100%;
           height: (60rem / @basefont);
           margin-top: (50rem / @basefont);
           img {
               width: 100%;
           }
       }
       .bigbox {
           display: flex;
           justify-content: space-between;
           width: 100%;
           padding: 0 (24rem / @basefont);
           ul {
            display: flex;
            flex-direction: column;
            width: (342rem / @basefont);
            a {
               display: block;
               overflow: hidden;
               width: (342rem / @basefont);
               height: (542rem / @basefont);
               margin-bottom: (14rem / @basefont);
               border-radius: (10rem / @basefont);
               background-color: rgb(255, 255, 255);
               img {
                   width: 100%;
                   height: (342rem / @basefont);
                   vertical-align: top;
               }
               .title {
                   display: -webkit-box;
                   overflow: hidden;
                   -webkit-box-orient: vertical;
                   -webkit-line-clamp: 2;
                   text-overflow: ellipsis;
                   width: (318rem / @basefont);
                   height: (59rem / @basefont);
                   margin: (18rem / @basefont) (12rem / @basefont) 0 (12rem / @basefont);
                   font-size: (26rem / @basefont);
                   font-weight: bold;
                   color: #333333;
               }
               .suning {
                   width: (128rem / @basefont);
                   height: (24rem / @basefont);
                   margin-top: (15rem / @basefont);
                   margin-left: (10rem / @basefont);
               }
               .price {
                   width: (330rem / @basefont);
                   height: (38rem / @basefont);
                   margin-left: (10rem / @basefont);
                   font-size: (36rem /@basefont);
                   color: #FF4422;
               }
           }
           }
        }
           
    
    }